@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            <p class="list-group-item list-group-item-danger">聊天室:</p>
            <div id="socket" class="jumbotron">

            </div>
            <div class="panel panel-default">
                <textarea id="textarea" class="form-control" rows="3"></textarea>
            </div>
            <p>
                <button id="test-1" class="btn btn-danger btn-lg btn-block">发送</button>
            </p>
        </div>
        <div class="col-md-3 col-md-pull-9">
            <p class="list-group-item list-group-item-danger">在线用户:</p>
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/socket.io/1.6.0/socket.io.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(function () {
        var socket = io('127.0.0.1:3000');
        //添加信息到div
        var addMsg = function (msg) {
            $('#socket').append('<div class="media">' +
                    '<a class="media-left" href="#">' +
                    '<img src="..." alt="...">' +
                    '</a> <div class="media-body">' +
                    '<h4 class="media-heading">Media heading</h4>' +
                    '<p>'+ msg +'</p>' +
                    '</div>')
        };
        //发送信息
        var sendMsg = function (msg) {
            socket.emit('messages',msg)
        };

        $('#test-1').click(function () {
            var text = $('#textarea').val();
            sendMsg(text);
            $('#textarea').val('');
        });

        socket.on('test-channel',function (data) {
            addMsg(data);
        });

        socket.on('messages',function (data) {
            addMsg(data);
        })
    })
</script>
@endsection
